<template>
  <div>
    <div w-full h-114px flex flex-a-c flex-j-c overflow-hidden class="wrapper">
      <image src="/static/promotions/seckill-text.png"></image>
    </div>

    <scroll-view scroll-x>
      <view class="navbar">
        <view class="navbar-list">
          <view class="navbar-item" :class="{ 'active': nav == index }" @click="clickNavigateTime(item.timeLine, index)"
            v-for="(item, index) in timeLine" :key="index">
            {{ item.timeLine }}:00
            <view class="index-nav-desc">{{ index === 0 && item.distanceStartTime === 0 ? '抢购中' : '即将开始' }}
            </view>
          </view>
        </view>
      </view>

    </scroll-view>
    <div v-if="isShow">
      <div v-if="goods.length">
        <div p-32rpx bg-white v-for="(item, index) in goods" :key="index">
          <oneRow  :key="index" :res="item"></oneRow>
        </div>
      </div>
      <empty v-else mt-100rpx></empty>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onPullDownRefresh, } from '@dcloudio/uni-app';
import { getSeckillTimeGoods, getSeckillTimeLine } from '@/api/promotion'
import oneRow from '@/components/goods-list/1row-promotion.vue';
import empty from '@/components/empty/index.vue';

const nav = ref<number>(0)
const timeLine = ref<any>([])
const goods = ref<any>([])
const isShow = ref<boolean>(false)

onPullDownRefresh(() => {
  isShow.value = false
  // reset()
  goods.value = [];
  init()
})

function clickNavigateTime(timeLine: string, index: number) {
  nav.value = index;
  goods.value = [];
  isShow.value = false
  fetchTimeLineGoods(timeLine);
}


async function init() {
  uni.stopPullDownRefresh();
  const res = await getSeckillTimeLine();
  isShow.value = true
  if (res.data.success) {
    timeLine.value = res.data.result
    if (res.data.result.length) {
      fetchTimeLineGoods(res.data.result[0].timeLine)
    }

  }
}

async function fetchTimeLineGoods(time: string) {
  const res = await getSeckillTimeGoods(time)
  isShow.value = true
  if (res.data.success) {
    if (res.data.result.length) {
      goods.value = res.data.result.map((item: any) => {
        return {
          ...item,
          thumbnail: item.goodsImage,
          id: item.skuId
        }
      })
      uni.stopPullDownRefresh();
    }
  }
}

onMounted(() => {
  init()
});
</script>

<style scoped lang="scss">
.wrapper {
  background: url('/static/promotions/bg.png');
  height: 200rpx;
  display: flex;
  align-items: center;
  justify-content: center;

  >image {
    width: 300rpx;
    height: 44px;
  }

}


.navbar {
  background: #fff;
  background-color: #f7f7f7;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-list {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.navbar-item {
  font-size: 28rpx;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150rpx;
  flex-direction: column;
  color: #bababa;
  height: 115rpx;
  line-height: 1em;
  position: relative;
  font-size: 32rpx;
  font-weight: bold;


}

.active {
  color: $main-color;
  position: relative;
  z-index: 30;

  .index-nav-desc {
    color: #fff;
    font-weight: bold;
    background: $main-color;
    padding: 6rpx 16rpx;
    border-radius: 50px;
  }
}

.index-nav-desc {
  margin-top: 8rpx;
  font-size: 22rpx;
  color: #bababa;
}
</style>
